<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>H+ 后台主题UI框架 - 主页</title>

    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    
    <style type="text/css">
    	#updateUserImg{
    		width: 580px;
    		height: 485px;
    		position: absolute;
    		display:none;
    		top:50px;
    		z-index: 10000;
    		background: #FFFFFF;
    		/*文字不能被选中 选中后会影响到写的拖拽效果*/
    		-webkit-user-select:none;
		    -moz-user-select:none;
		    -ms-user-select:none;
		    user-select:none;
    	}
    	#replaceImg {
    		width: 580px;
    		height: 45px;
    		background: #FCFCFC;
    		line-height:45px;
    	}
    	#replaceImg_background {
    		width: 100%;
    		height: 100%;
    		top:0;
    		opacity: 0.5;
    		border-bottom: 1px;
    		background: #70737D;
    		position: absolute;
    		display:none;
    		z-index: 9999;
    	}
    	#replaceImg_text{
    		float:left;
    		margin-left: 20px;
    	}
    	#replaceImg_Icon{
    		width:30px;
    		height:30px;
    		margin-top: 8px;
    		text-align: center;
    		font-size: 25px;
    		color: #40485B;
    		float:right;
    		margin-right: 20px;
    		line-height:30px;
    	}
    	#mainImg{
    		width:580px;
    		height:350px;
    		margin-top:25px;
    	}
    	#mainImg_left{
    		float: left;
    		margin-left: 25px;
		    position: relative;
		    display: inline-block;
		    height: 350px;
		    width: 350px;
		    background: #fff;
		    overflow: hidden;
		    background-repeat: no-repeat;
		    cursor: move; /*某对象可被移动*/
		    background-image: url("https://img.xfj100.com/upload/images/201902/20/default.jpg");
		    background-size:330px;
		    background-position:center center;
    	}
    	#maxImg{
    		position: absolute;
		    top: 50%;
		    left: 50%;
		    width: 250px;
		    height: 250px;
		    margin-top: -125px;
		    margin-left: -125px;
		    border: 1px solid #666;
		    border-radius: 100%;
		    -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0.5);
		    box-shadow: 0 0 0 1000px rgba(0,0,0,0.5);
		    background: none repeat scroll 0% 0% transparent;
    	}
    	
    	#hideCanvas{
		    border: 1px solid #000000;
		    position: absolute;
		    z-index: 9999;
		    top:0px;
		    left:250px;
    	}
    	
    	#mainImg_right{
    		width:180px;
    		height:350px;
    		float: left;
    		margin-left: 10px;
    	}
    	#oneHundredImg{
    		width: 180px;
    		height:104px;
    	}
    	#fiftyImg{
    		width: 180px;
    		height:54px;
    		margin-top: 20px;
    	}
    	
    	#secondary{
    		width: 100px;
    		height:100px;
    		margin-left: 40px;
    		border-radius:100px;
		 	overflow: hidden;
		    background-repeat: no-repeat;
		    cursor: move; /*某对象可被移动*/
		    background-image: url("https://img.xfj100.com/upload/images/201902/20/default.jpg");
		    background-size:132px;
		    background-position:center center;
		    border:1px #000000 solid;
    	}
    	#small{
    		width: 50px;
    		height:50px;
    		margin-left: 65px;
    		border-radius:50px;
		 	overflow: hidden;
		    background-repeat: no-repeat;
		    cursor: move; /*某对象可被移动*/
		    background-image: url("https://img.xfj100.com/upload/images/201902/20/default.jpg");
		    background-size:66px;
		    background-position:center center;
		    border:1px #000000 solid;
    	}
    	#operationImg{
    		width:580px;
    		height: 37px;
    	}
    	#enlargeOrnarrow {
    		width:350px;
    		height: 37px;
    		float:left;
    		margin-left: 25px;
    		text-align: center;
    		line-height: 37px;
    		letter-spacing:5px;
    		font-size: 18px;
    	}
    	#onloadImg{
    		width:150px;
    		height: 37px;
    		float:right;
    		font-size: 14px;
    	}
    	    	
    </style>
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
    <div id="wrapper">
        <!--左侧导航开始-->
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="nav-close"><i class="fa fa-times-circle"></i>
            </div>
            <div class="sidebar-collapse" id="choice">
                <ul class="nav" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element">
                        	<!--imgPrefix + img/myimg.jpg-->
                            <span><img alt="image" class="img-circle" id="agentAvatar" src="" width="64px" height="64px"/></span>
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear">
                               <span class="block m-t-xs" style="text-align: center;width: 64px;"><strong class="font-bold" id="userName">
                               </strong></span>
                                <span class="text-muted text-xs block">超级管理员<b class="caret"></b></span>
                                </span>
                            </a>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <!--<li><a class="J_menuItem" href="form_avatar.html">修改头像</a>-->
                                <li><a class="J_menuItem" id="updateImg">修改头像</a>
                                </li>
                                <li><a class="J_menuItem" href="profile.html">个人资料</a>
                                </li>
                                <li><a class="J_menuItem" href="contacts.html">联系我们</a>
                                </li>
                                <li><a class="J_menuItem" href="mailbox.html">信箱</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="login.html">安全退出</a>
                                </li>
                            </ul>
                        </div>
                        <div class="logo-element">H+
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-home"></i>
                            <span class="nav-label">奥特曼</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level" id="homepage">
						    <script id="tpl" type="text/html">
								<%for(var i in mainData){%>   
									<li>
										<a class="J_menuItem" href="index_v1.html" data-index="0"><%=mainData[i]%></a>
									</li>
								<%}%>
							</script>
                            <!---<li>
                                <a class="J_menuItem" href="index_v1.html" data-index="0">主页示例一</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="index_v2.html">主页示例二</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="index_v3.html">主页示例三</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="index_v4.html">主页示例四</a>
                            </li>
                            <li>
                                <a href="index_v5.html" target="_blank">主页示例五</a>
                            </li>
                             <li>
                                <a href="index_v5.html" target="_blank">主页示例五</a>
                            </li>-->
                        </ul>

                    </li>
                    <li>
                        <a class="J_menuItem" href="layouts.html"><i class="fa fa-columns"></i> <span class="nav-label">布局</span></a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa fa-bar-chart-o"></i>
                            <span class="nav-label">统计图表</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a class="J_menuItem" href="graph_echarts.html">百度ECharts</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="graph_flot.html">Flot</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="graph_morris.html">Morris.js</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="graph_rickshaw.html">Rickshaw</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="graph_peity.html">Peity</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="graph_sparkline.html">Sparkline</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="graph_metrics.html">图表组合</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">信箱 </span><span class="label label-warning pull-right">16</span></a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href="mailbox.html">收件箱</a>
                            </li>
                            <li><a class="J_menuItem" href="mail_detail.html">查看邮件</a>
                            </li>
                            <li><a class="J_menuItem" href="mail_compose.html">写信</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-edit"></i> <span class="nav-label">表单</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href="form_basic.html">基本表单</a>
                            </li>
                            <li><a class="J_menuItem" href="form_validate.html">表单验证</a>
                            </li>
                            <li><a class="J_menuItem" href="form_advanced.html">高级插件</a>
                            </li>
                            <li><a class="J_menuItem" href="form_wizard.html">表单向导</a>
                            </li>
                            <li>
                                <a href="#">文件上传 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="form_webuploader.html">百度WebUploader</a>
                                    </li>
                                    <li><a class="J_menuItem" href="form_file_upload.html">DropzoneJS</a>
                                    </li>
                                    <li><a class="J_menuItem" href="form_avatar.html">头像裁剪上传</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">编辑器 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="form_editors.html">富文本编辑器</a>
                                    </li>
                                    <li><a class="J_menuItem" href="form_simditor.html">simditor</a>
                                    </li>
                                    <li><a class="J_menuItem" href="form_markdown.html">MarkDown编辑器</a>
                                    </li>
                                    <li><a class="J_menuItem" href="code_editor.html">代码编辑器</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="J_menuItem" href="suggest.html">搜索自动补全</a>
                            </li>
                            <li><a class="J_menuItem" href="layerdate.html">日期选择器layerDate</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-desktop"></i> <span class="nav-label">页面</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href="contacts.html">联系人</a>
                            </li>
                            <li><a class="J_menuItem" href="profile.html">个人资料</a>
                            </li>
                            <li>
                                <a href="#">项目管理 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="projects.html">项目</a>
                                    </li>
                                    <li><a class="J_menuItem" href="project_detail.html">项目详情</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="J_menuItem" href="teams_board.html">团队管理</a>
                            </li>
                            <li><a class="J_menuItem" href="social_feed.html">信息流</a>
                            </li>
                            <li><a class="J_menuItem" href="clients.html">客户管理</a>
                            </li>
                            <li><a class="J_menuItem" href="file_manager.html">文件管理器</a>
                            </li>
                            <li><a class="J_menuItem" href="calendar.html">日历</a>
                            </li>
                            <li>
                                <a href="#">博客 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="blog.html">文章列表</a>
                                    </li>
                                    <li><a class="J_menuItem" href="article.html">文章详情</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="J_menuItem" href="faq.html">FAQ</a>
                            </li>
                            <li>
                                <a href="#">时间轴 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="timeline.html">时间轴</a>
                                    </li>
                                    <li><a class="J_menuItem" href="timeline_v2.html">时间轴v2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="J_menuItem" href="pin_board.html">标签墙</a>
                            </li>
                            <li>
                                <a href="#">单据 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="invoice.html">单据</a>
                                    </li>
                                    <li><a class="J_menuItem" href="invoice_print.html">单据打印</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="J_menuItem" href="search_results.html">搜索结果</a>
                            </li>
                            <li><a class="J_menuItem" href="forum_main.html">论坛</a>
                            </li>
                            <li>
                                <a href="#">即时通讯 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="chat_view.html">聊天窗口</a>
                                    </li>
                                    <li><a class="J_menuItem" href="webim.html">layIM</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">登录注册相关 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a href="login.html" target="_blank">登录页面</a>
                                    </li>
                                    <li><a href="login_v2.html" target="_blank">登录页面v2</a>
                                    </li>
                                    <li><a href="register.html" target="_blank">注册页面</a>
                                    </li>
                                    <li><a href="lockscreen.html" target="_blank">登录超时</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="J_menuItem" href="404.html">404页面</a>
                            </li>
                            <li><a class="J_menuItem" href="500.html">500页面</a>
                            </li>
                            <li><a class="J_menuItem" href="empty_page.html">空白页</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-flask"></i> <span class="nav-label">UI元素</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href="typography.html">排版</a>
                            </li>
                            <li>
                                <a href="#">字体图标 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a class="J_menuItem" href="fontawesome.html">Font Awesome</a>
                                    </li>
                                    <li>
                                        <a class="J_menuItem" href="glyphicons.html">Glyphicon</a>
                                    </li>
                                    <li>
                                        <a class="J_menuItem" href="iconfont.html">阿里巴巴矢量图标库</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">拖动排序 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="draggable_panels.html">拖动面板</a>
                                    </li>
                                    <li><a class="J_menuItem" href="agile_board.html">任务清单</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="J_menuItem" href="buttons.html">按钮</a>
                            </li>
                            <li><a class="J_menuItem" href="tabs_panels.html">选项卡 &amp; 面板</a>
                            </li>
                            <li><a class="J_menuItem" href="notifications.html">通知 &amp; 提示</a>
                            </li>
                            <li><a class="J_menuItem" href="badges_labels.html">徽章，标签，进度条</a>
                            </li>
                            <li>
                                <a class="J_menuItem" href="grid_options.html">栅格</a>
                            </li>
                            <li><a class="J_menuItem" href="plyr.html">视频、音频</a>
                            </li>
                            <li>
                                <a href="#">弹框插件 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="layer.html">Web弹层组件layer</a>
                                    </li>
                                    <li><a class="J_menuItem" href="modal_window.html">模态窗口</a>
                                    </li>
                                    <li><a class="J_menuItem" href="sweetalert.html">SweetAlert</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">树形视图 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li><a class="J_menuItem" href="jstree.html">jsTree</a>
                                    </li>
                                    <li><a class="J_menuItem" href="tree_view.html">Bootstrap Tree View</a>
                                    </li>
                                    <li><a class="J_menuItem" href="nestable_list.html">nestable</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="J_menuItem" href="toastr_notifications.html">Toastr通知</a>
                            </li>
                            <li><a class="J_menuItem" href="diff.html">文本对比</a>
                            </li>
                            <li><a class="J_menuItem" href="spinners.html">加载动画</a>
                            </li>
                            <li><a class="J_menuItem" href="widgets.html">小部件</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-table"></i> <span class="nav-label">表格</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href="table_basic.html">基本表格</a>
                            </li>
                            <li><a class="J_menuItem" href="table_data_tables.html">DataTables</a>
                            </li>
                            <li><a class="J_menuItem" href="table_jqgrid.html">jqGrid</a>
                            </li>
                            <li><a class="J_menuItem" href="table_foo_table.html">Foo Tables</a>
                            </li>
                            <li><a class="J_menuItem" href="table_bootstrap.html">Bootstrap Table
                                <span class="label label-danger pull-right">推荐</span></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-picture-o"></i> <span class="nav-label">相册</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href="basic_gallery.html">基本图库</a>
                            </li>
                            <li><a class="J_menuItem" href="carousel.html">图片切换</a>
                            </li>
                            <li><a class="J_menuItem" href="blueimp.html">Blueimp相册</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="J_menuItem" href="css_animation.html"><i class="fa fa-magic"></i> <span class="nav-label">CSS动画</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-cutlery"></i> <span class="nav-label">工具 </span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a class="J_menuItem" href="form_builder.html">表单构建器</a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
        <!--左侧导航结束-->
        <!--右侧部分开始-->
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                        <form role="search" class="navbar-form-custom" method="post" action="search_results.html">
                            <div class="form-group">
                                <input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search" id="top-search">
                            </div>
                        </form>
                    </div>
                    <ul class="nav navbar-top-links navbar-right" id = "topNavigation">
                        <li class="dropdown">
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                                <i class="fa fa-envelope"></i> <span class="label label-warning">16</span>
                            </a>
                            <ul class="dropdown-menu dropdown-messages">
                                <li class="m-t-xs">
                                    <div class="dropdown-messages-box">
                                        <a href="profile.html" class="pull-left">
                                            <img alt="image" class="img-circle" src="img/a7.jpg">
                                        </a>
                                        <div class="media-body">
                                            <small class="pull-right">46小时前</small>
                                            <strong>小四</strong> 这个在日本投降书上签字的军官，建国后一定是个不小的干部吧？
                                            <br>
                                            <small class="text-muted">3天前 2014.11.8</small>
                                        </div>
                                    </div>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="dropdown-messages-box">
                                        <a href="profile.html" class="pull-left">
                                            <img alt="image" class="img-circle" src="img/a4.jpg">
                                        </a>
                                        <div class="media-body ">
                                            <small class="pull-right text-navy">25小时前</small>
                                            <strong>国民岳父</strong> 如何看待“男子不满自己爱犬被称为狗，刺伤路人”？——这人比犬还凶
                                            <br>
                                            <small class="text-muted">昨天</small>
                                        </div>
                                    </div>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="text-center link-block">
                                        <a class="J_menuItem" href="mailbox.html">
                                            <i class="fa fa-envelope"></i> <strong> 查看所有消息</strong>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                                <i class="fa fa-bell"></i> <span class="label label-primary">8</span>
                            </a>
                            <ul class="dropdown-menu dropdown-alerts">
                                <li>
                                    <a href="mailbox.html">
                                        <div>
                                            <i class="fa fa-envelope fa-fw"></i> 您有16条未读消息
                                            <span class="pull-right text-muted small">4分钟前</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="profile.html">
                                        <div>
                                            <i class="fa fa-qq fa-fw"></i> 3条新回复
                                            <span class="pull-right text-muted small">12分钟钱</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="text-center link-block">
                                        <a class="J_menuItem" href="notifications.html">
                                            <strong>查看所有 </strong>
                                            <i class="fa fa-angle-right"></i>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="hidden-xs">
                            <a href="index_v1.html" class="J_menuItem" data-index="0"><i class="fa fa-cart-arrow-down"></i> 购买</a>
                        </li>
                        <li class="dropdown hidden-xs">
                            <a class="right-sidebar-toggle" aria-expanded="false">
                                <i class="fa fa-tasks"></i> 主题
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="row content-tabs">
                <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
                </button>
                <nav class="page-tabs J_menuTabs">
                    <div class="page-tabs-content">
                        <a href="javascript:;" class="active J_menuTab" data-id="index_v1.html">首页</a>
                    </div>
                </nav>
                <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i>
                </button>
                <div class="btn-group roll-nav roll-right">
                    <button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span>

                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                        <li class="J_tabShowActive"><a>定位当前选项卡</a>
                        </li>
                        <li class="divider"></li>
                        <li class="J_tabCloseAll"><a>关闭全部选项卡</a>
                        </li>
                        <li class="J_tabCloseOther"><a>关闭其他选项卡</a>
                        </li>
                    </ul>
                </div>
                <a href="login.html" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
            </div>
            <div class="row J_mainContent" id="content-main">
                <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="index_v1.html?v=4.0" frameborder="0" data-id="index_v1.html" seamless></iframe>
            </div>
            <div class="footer">
                <div class="pull-right">&copy; 2014-2015 <a href="http://www.zi-han.net/" target="_blank">zihan's blog</a>
                </div>
            </div>
        </div>
        <!--右侧部分结束-->
        <!--右侧边栏开始-->
        <div id="right-sidebar">
            <div class="sidebar-container">

                <ul class="nav nav-tabs navs-3">

                    <li class="active">
                        <a data-toggle="tab" href="#tab-1">
                            <i class="fa fa-gear"></i> 主题
                        </a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2">
                        通知
                    </a>
                    </li>
                    <li><a data-toggle="tab" href="#tab-3">
                        项目进度
                    </a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="sidebar-title">
                            <h3> <i class="fa fa-comments-o"></i> 主题设置</h3>
                            <small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。</small>
                        </div>
                        <div class="skin-setttings">
                            <div class="title">主题设置</div>
                            <div class="setings-item">
                                <span>收起左侧菜单</span>
                                <div class="switch">
                                    <div class="onoffswitch">
                                        <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu">
                                        <label class="onoffswitch-label" for="collapsemenu">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setings-item">
                                <span>固定顶部</span>

                                <div class="switch">
                                    <div class="onoffswitch">
                                        <input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar">
                                        <label class="onoffswitch-label" for="fixednavbar">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setings-item">
                                <span>
                        固定宽度
                    </span>

                                <div class="switch">
                                    <div class="onoffswitch">
                                        <input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout">
                                        <label class="onoffswitch-label" for="boxedlayout">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="title">皮肤选择</div>
                            <div class="setings-item default-skin nb">
                                <span class="skin-name ">
                         <a href="#" class="s-skin-0">
                             默认皮肤
                         </a>
                    </span>
                            </div>
                            <div class="setings-item blue-skin nb">
                                <span class="skin-name ">
                        <a href="#" class="s-skin-1">
                            蓝色主题
                        </a>
                    </span>
                            </div>
                            <div class="setings-item yellow-skin nb">
                                <span class="skin-name ">
                        <a href="#" class="s-skin-3">
                            黄色/紫色主题
                        </a>
                    </span>
                            </div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">

                        <div class="sidebar-title">
                            <h3> <i class="fa fa-comments-o"></i> 最新通知</h3>
                            <small><i class="fa fa-tim"></i> 您当前有10条未读信息</small>
                        </div>

                        <div>

                            <div class="sidebar-message">
                                <a href="#">
                                    <div class="pull-left text-center">
                                        <img alt="image" class="img-circle message-avatar" src="img/a1.jpg">

                                        <div class="m-t-xs">
                                            <i class="fa fa-star text-warning"></i>
                                            <i class="fa fa-star text-warning"></i>
                                        </div>
                                    </div>
                                    <div class="media-body">

                                        据天津日报报道：瑞海公司董事长于学伟，副董事长董社轩等10人在13日上午已被控制。
                                        <br>
                                        <small class="text-muted">今天 4:21</small>
                                    </div>
                                </a>
                            </div>
                            <div class="sidebar-message">
                                <a href="#">
                                    <div class="pull-left text-center">
                                        <img alt="image" class="img-circle message-avatar" src="img/a2.jpg">
                                    </div>
                                    <div class="media-body">
                                        HCY48之音乐大魔王会员专属皮肤已上线，快来一键换装拥有他，宣告你对华晨宇的爱吧！
                                        <br>
                                        <small class="text-muted">昨天 2:45</small>
                                    </div>
                                </a>
                            </div>
                            <div class="sidebar-message">
                                <a href="#">
                                    <div class="pull-left text-center">
                                        <img alt="image" class="img-circle message-avatar" src="img/a3.jpg">

                                        <div class="m-t-xs">
                                            <i class="fa fa-star text-warning"></i>
                                            <i class="fa fa-star text-warning"></i>
                                            <i class="fa fa-star text-warning"></i>
                                        </div>
                                    </div>
                                    <div class="media-body">
                                        写的好！与您分享
                                        <br>
                                        <small class="text-muted">昨天 1:10</small>
                                    </div>
                                </a>
                            </div>
                            <div class="sidebar-message">
                                <a href="#">
                                    <div class="pull-left text-center">
                                        <img alt="image" class="img-circle message-avatar" src="img/a4.jpg">
                                    </div>

                                    <div class="media-body">
                                        国外极限小子的炼成！这还是亲生的吗！！
                                        <br>
                                        <small class="text-muted">昨天 8:37</small>
                                    </div>
                                </a>
                            </div>
                            <div class="sidebar-message">
                                <a href="#">
                                    <div class="pull-left text-center">
                                        <img alt="image" class="img-circle message-avatar" src="img/a8.jpg">
                                    </div>
                                    <div class="media-body">

                                        一只流浪狗被收留后，为了减轻主人的负担，坚持自己觅食，甚至......有些东西，可能她比我们更懂。
                                        <br>
                                        <small class="text-muted">今天 4:21</small>
                                    </div>
                                </a>
                            </div>
                            <div class="sidebar-message">
                                <a href="#">
                                    <div class="pull-left text-center">
                                        <img alt="image" class="img-circle message-avatar" src="img/a7.jpg">
                                    </div>
                                    <div class="media-body">
                                        这哥们的新视频又来了，创意杠杠滴，帅炸了！
                                        <br>
                                        <small class="text-muted">昨天 2:45</small>
                                    </div>
                                </a>
                            </div>
                            <div class="sidebar-message">
                                <a href="#">
                                    <div class="pull-left text-center">
                                        <img alt="image" class="img-circle message-avatar" src="img/a3.jpg">

                                        <div class="m-t-xs">
                                            <i class="fa fa-star text-warning"></i>
                                            <i class="fa fa-star text-warning"></i>
                                            <i class="fa fa-star text-warning"></i>
                                        </div>
                                    </div>
                                    <div class="media-body">
                                        最近在补追此剧，特别喜欢这段表白。
                                        <br>
                                        <small class="text-muted">昨天 1:10</small>
                                    </div>
                                </a>
                            </div>
                            <div class="sidebar-message">
                                <a href="#">
                                    <div class="pull-left text-center">
                                        <img alt="image" class="img-circle message-avatar" src="img/a4.jpg">
                                    </div>
                                    <div class="media-body">
                                        我发起了一个投票 【你认为下午大盘会翻红吗？】
                                        <br>
                                        <small class="text-muted">星期一 8:37</small>
                                    </div>
                                </a>
                            </div>
                        </div>

                    </div>
                    <div id="tab-3" class="tab-pane">

                        <div class="sidebar-title">
                            <h3> <i class="fa fa-cube"></i> 最新任务</h3>
                            <small><i class="fa fa-tim"></i> 您当前有14个任务，10个已完成</small>
                        </div>

                        <ul class="sidebar-list">
                            <li>
                                <a href="#">
                                    <div class="small pull-right m-t-xs">9小时以后</div>
                                    <h4>市场调研</h4> 按要求接收教材；

                                    <div class="small">已完成： 22%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
                                    </div>
                                    <div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="small pull-right m-t-xs">9小时以后</div>
                                    <h4>可行性报告研究报上级批准 </h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对

                                    <div class="small">已完成： 48%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 48%;" class="progress-bar"></div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="small pull-right m-t-xs">9小时以后</div>
                                    <h4>立项阶段</h4> 东风商用车公司 采购综合综合查询分析系统项目进度阶段性报告武汉斯迪克科技有限公司

                                    <div class="small">已完成： 14%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 14%;" class="progress-bar progress-bar-info"></div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">NEW</span>
                                    <h4>设计阶段</h4>
                                    <!--<div class="small pull-right m-t-xs">9小时以后</div>-->
                                    项目进度报告(Project Progress Report)
                                    <div class="small">已完成： 22%</div>
                                    <div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="small pull-right m-t-xs">9小时以后</div>
                                    <h4>拆迁阶段</h4> 科研项目研究进展报告 项目编号: 项目名称: 项目负责人:

                                    <div class="small">已完成： 22%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
                                    </div>
                                    <div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="small pull-right m-t-xs">9小时以后</div>
                                    <h4>建设阶段 </h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对

                                    <div class="small">已完成： 48%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 48%;" class="progress-bar"></div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="small pull-right m-t-xs">9小时以后</div>
                                    <h4>获证开盘</h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对

                                    <div class="small">已完成： 14%</div>
                                    <div class="progress progress-mini">
                                        <div style="width: 14%;" class="progress-bar progress-bar-info"></div>
                                    </div>
                                </a>
                            </li>

                        </ul>

                    </div>
                </div>

            </div>
        </div>
        <!--右侧边栏结束-->
        <!--mini聊天窗口开始-->
        <div class="small-chat-box fadeInRight animated">

            <div class="heading" draggable="true">
                <small class="chat-date pull-right">
                    2015.9.1
                </small> 与 Beau-zihan 聊天中
            </div>

            <div class="content">

                <div class="left">
                    <div class="author-name">
                        Beau-zihan <small class="chat-date">
                        10:02
                    </small>
                    </div>
                    <div class="chat-message active">
                        你好
                    </div>

                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        你好，请问H+有帮助文档吗？
                    </div>
                </div>
                <div class="left">
                    <div class="author-name">
                        Beau-zihan
                        <small class="chat-date">
                            08:45
                        </small>
                    </div>
                    <div class="chat-message active">
                        有，购买的H+源码包中有帮助文档，位于docs文件夹下
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那除了帮助文档还提供什么样的服务？
                    </div>
                </div>
                <div class="left">
                    <div class="author-name">
                        Beau-zihan
                        <small class="chat-date">
                            08:45
                        </small>
                    </div>
                    <div class="chat-message active">
                        1.所有源码(未压缩、带注释版本)；
                        <br> 2.说明文档；
                        <br> 3.终身免费升级服务；
                        <br> 4.必要的技术支持；
                        <br> 5.付费二次开发服务；
                        <br> 6.授权许可；
                        <br> ……
                        <br>
                    </div>
                </div>


            </div>
            <div class="form-chat">
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control"> <span class="input-group-btn"> <button
                        class="btn btn-primary" type="button">发送
                </button> </span>
                </div>
            </div>

        </div>
        <div id="small-chat">
            <span class="badge badge-warning pull-right">5</span>
            <a class="open-small-chat">
                <i class="fa fa-comments"></i>

            </a>
        </div>
        <!--mini聊天窗口结束-->
    </div>
    <div id="replaceImg_background"></div>
	<div id="updateUserImg">
        <div id="replaceImg">
        	<div id = "replaceImg_text">更换头像</div>
        	<div id = "replaceImg_Icon">X</div>
        </div>
    	<div id="mainImg">
    		<div id="mainImg_left">
    			<div id="maxImg">
				</div>
			</div>
    		<div id="mainImg_right">
    			<div style="text-align: center;">预览</div>
    			<div id="oneHundredImg">
    				<div id="secondary">
    					
    				</div>
    			</div>
    			<div style="width: 180px;height: auto;text-align: center;">100 x 100 </div>
    			<div id="fiftyImg">
    				<div id="small">
    					
    				</div>
    			</div>
    			<div style="width: 180px;height: auto;text-align: center;">50 x 50 </div>
    		</div>
    	</div>
    	<div id="operationImg" class="onload">
    		<div id="enlargeOrnarrow">
    			<i class="fa fa-undo"  id="rotate_left"></i>
    			<i class="fa fa-plus" id="zoom_in"></i>
    			<i class="fa fa-minus" id="zoom_out"></i>
    			<i class="fa fa-repeat" id="rotate_right"></i>
    		</div>
    		<div id="onloadImg" class="onload">
    			<span style="color: #49626F;" onclick = "clp();">选图</span>&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="file" id="file" style="display: none;"/>
    			<button class="btn btn-success" type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传</span>
                </button>
    		</div>
    	</div>
    </div>
    <canvas id="hideCanvas" width="250px" height="250px">
    	<!--隐藏画布-->
    </canvas>
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>

    <script src="js/hplus.js?v=4.1.0"></script>
    <script type="text/javascript" src="js/contabs.js"></script>

    <!-- 第三方插件 -->
    <script src="js/plugins/pace/pace.min.js"></script>
    
</body>
<!-- 自定义js -->
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/config/prefixConfig.js"></script>
<script src="js/template.js"></script>
<script src="js/session.js"></script>

<script>
onload = getZy();

/**
 * 加载主页模板
 */
function getZy() {
	getData("/wxc/templateService/getTemplate?agentId=520").then((res)=> {
		if(res.data.resultCode) {
			var data = res.data
			var html = template(document.getElementById('tpl').innerHTML,data);
			document.getElementById('homepage').innerHTML = html;
			renderingUserInfo();
			registerRongyun();
		} else {
			alert(res.data.content);
		}
	}).catch((err)=> {
		alert(err);
	})
}

/**
 *渲染用户信息
 */
function renderingUserInfo() {
	var session = new Session();
	var agentName = session.get("agentName");
	var agentAvatar = session.get("agentAvatar");
	if(agentName == null) {
		window.location.href="login_v2.html";
		return;
	}
	var prefix= new Prefix();
	var imgPrefix = prefix.getImgPrefix();
	$("#userName").append(template(agentName));
	$("#agentAvatar").attr("src", imgPrefix + agentAvatar);
	$(".text-muted text-xs block").val();
	
}


/**
 * 注册融云账号 
 */
function registerRongyun() {
	var prefix= new Prefix();
	var session  = new Session();
	var agentId = session.get("agentId");
	var userName = session.get("agentName");
	var agentAvatar = session.get("agentAvatar");
	var params = new URLSearchParams();
	params.append('id', agentId);
	params.append('userName', userName);
	params.append('portrait', agentAvatar);
	params.append('password', $("#password").val());
	postData("/wxc/rongYunService/registerUser",params).then((res)=>{
		//无论失败或成功都不做任何提示
	}).catch((err)=> {
		alert(err);
	})
}

/**
 * 窗口改变自动适应
 */
window.onresize = selfAdaptionMove();

/**
 * 点击修改图片执行的事件
 */
$("#updateImg").on("click", function() {
	selfAdaptionMove();
	$("#updateUserImg").css("display","block");
	$("#replaceImg_background").css("display","block");
});

/**
 * 给弹出的修改图片层 设置合理的位置
 */
function selfAdaptionMove(){
	var updateImgtop = (document.documentElement.clientHeight + document.getElementById("topNavigation").clientHeight - 485)/2;
	var updateImgleft = (document.documentElement.clientWidth + document.getElementById("choice").clientWidth - 580)/2;
	$("#updateUserImg").css("left",updateImgleft);
	$("#updateUserImg").css("top",updateImgtop);
};

/**
 * 关闭修改图片
 */
$("#replaceImg_Icon").click(function(){
	$("#replaceImg_background").css("display","none");
	$("#updateUserImg").css("display","none");
})

/**
 * 移动浏览要修改的图片 
 */
 /****************************盒子拖拽功能********************************/ 
//点击拖拽的“注册信息栏”，拖动整个盒子的移动。首先获得要拖拽的盒子
var updateUserImg=document.getElementById('updateUserImg');
var mainImgLeft=document.getElementById('mainImg_left');
var small=document.getElementById('small');
var secondary=document.getElementById('secondary');
var boxX = 0;
var boxY = 0;
var left_num = 0; //左转次数
var zoom_num = 0; //缩放次数
var zoom_size = 50; //一次缩放多少px

mainImgLeft.onmousedown=function(e){
    e = e || window.event;
    //当鼠标按下的时候,获得鼠标在盒子中的位置
    //鼠标在盒子中的位置=鼠标在页面中的位置-盒子在页面的位置
    //鼠标在页面中的位置
    var x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
    
    //盒子在页面中的位置
	//获取上次移动的距离
	var xs = boxX;
	var ys = boxY;
	//背景的距离
	var box_x = 0;
	var box_y = 0;
	if(xs == 0 && ys == 0) {
		//盒子离父级div的边距 加上 父级离body得边距得到盒子离body得边距 
		box_x=parseInt(mainImgLeft.offsetLeft) + parseInt(updateUserImg.offsetLeft);
    	box_y=parseInt(mainImgLeft.offsetTop) + parseInt(updateUserImg.offsetTop);
	} else{
		//获取缓存中背景上次的位置
		box_x=parseInt(mainImgLeft.offsetLeft) + parseInt(updateUserImg.offsetLeft) + parseInt(xs);
    	box_y=parseInt(mainImgLeft.offsetTop) + parseInt(updateUserImg.offsetTop) + parseInt(ys);
	}
    //鼠标在盒子中的位置
    var mouse_in_box_x=x-box_x;
    var mouse_in_box_y=y-box_y;
    
    //注册鼠标移动事件,因为鼠标按下后,在页面移动,盒子跟着移动
    mainImgLeft.onmousemove=function(e){
        e = e || window.event;
        //鼠标在页面中移动时,求盒子的坐标
        //鼠标移动时盒子移动位置=鼠标当前位置-鼠标在盒子中移动的距离
        x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
        y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
        boxX=x-mouse_in_box_x;
        boxY=y-mouse_in_box_y;
   
		//背景的偏移距离
		boxX = boxX - (parseInt(mainImgLeft.offsetLeft) + parseInt(updateUserImg.offsetLeft))
		boxY = boxY - (parseInt(mainImgLeft.offsetTop) + parseInt(updateUserImg.offsetTop))
		
   		//移动的距离
		$("#replaceImg_text").text(boxX + "," + boxY);
		moveImg();
		
    }
}

/**
 * 根据旋转的角度 移动图片
 * 0 是正图 1是右边旋转90 2是右边旋转180 3是右边旋转270 
 * 0 是正图 -1是左边边旋转90（同3） -2是左边边旋转180（同2） -3是左边旋转270（同1）
 */
function moveImg() {
	if(left_num%4 == 0) { //正图
		//大图 背景图上左都移动了10px 还要减去 缩放px的一半（这样看上去就成了中心缩放）
	    mainImgLeft.style.backgroundPositionX=boxX + 10 - zoom_num * zoom_size/2 +'px';
	    mainImgLeft.style.backgroundPositionY=boxY+ 10 - zoom_num * zoom_size/2 +'px';
	    //中图 背景图比实际的框大32 所以移动的其实位置都是-16
	    secondary.style.backgroundPositionX=boxX*0.4 - 16 - zoom_num * zoom_size/2 * 0.4 + 'px';
	    secondary.style.backgroundPositionY=boxY*0.4 - 16 - zoom_num * zoom_size/2 * 0.4 + 'px';
	    //小图 同中图 起始位置-8
	    small.style.backgroundPositionX=boxX*0.2 - 8 - zoom_num * zoom_size/2 * 0.2 +'px';
	    small.style.backgroundPositionY=boxY*0.2 - 8 - zoom_num * zoom_size/2 * 0.2 +'px';
   	}
	
	if(left_num%4 == 1 || left_num%4 == -3) { //右边旋转了90度
		//如果按正图的方式移动会有这些结果
		//鼠标x轴加的时候，图片y轴减
		//鼠标y轴加的时候，图片x轴加
		/*调整结果*/
		//大图 背景图上左都移动了10px
	    mainImgLeft.style.backgroundPositionX=boxY + 10 - zoom_num * zoom_size/2 +'px';
	    mainImgLeft.style.backgroundPositionY=-boxX+ 10 - zoom_num * zoom_size/2 +'px';
	    //中图 背景图比实际的框大32 所以移动的其实位置都是-16
	    secondary.style.backgroundPositionX=boxY*0.4 - 16 - zoom_num * zoom_size/2 * 0.4 + 'px';
	    secondary.style.backgroundPositionY=-boxX*0.4 - 16 - zoom_num * zoom_size/2 * 0.4 + 'px';
	    //小图 同中图 起始位置-8
	    small.style.backgroundPositionX=boxY*0.2 - 8 - zoom_num * zoom_size/2 * 0.2 +'px';
	    small.style.backgroundPositionY=-boxX*0.2 - 8 - zoom_num * zoom_size/2 * 0.2 +'px';
   	}
	
	if(left_num%4 == 2 || left_num%4 == -2) { //右边旋转了180度
		//如果按正图的方式移动会有这些结果
		//鼠标x轴加的时候，图片x轴减
		//鼠标y轴加的时候，图片y轴减
		/*调整结果*/
		//大图 背景图上左都移动了10px
	    mainImgLeft.style.backgroundPositionX=-boxX + 10 - zoom_num * zoom_size/2 +'px';
	    mainImgLeft.style.backgroundPositionY=-boxY+ 10 - zoom_num * zoom_size/2 +'px';
	    //中图 背景图比实际的框大32 所以移动的其实位置都是-16
	    secondary.style.backgroundPositionX=-boxX*0.4 - 16 - zoom_num * zoom_size/2 * 0.4 + 'px';
	    secondary.style.backgroundPositionY=-boxY*0.4 - 16 - zoom_num * zoom_size/2 * 0.4 + 'px';
	    //小图 同中图 起始位置-8
	    small.style.backgroundPositionX=-boxX*0.2 - 8 - zoom_num * zoom_size/2 * 0.2 +'px';
	    small.style.backgroundPositionY=-boxY*0.2 - 8 - zoom_num * zoom_size/2 * 0.2 +'px';
   	}
	
	if(left_num%4 == 3 || left_num%4 == -1) { //右边旋转了270度
		//如果按正图的方式移动会有这些结果
		//鼠标x轴加的时候，图片y轴加
		//鼠标y轴加的时候，图片x轴减
		/*调整结果*/
		//大图 背景图上左都移动了10px
	    mainImgLeft.style.backgroundPositionX=-boxY + 10 - zoom_num * zoom_size/2 +'px';
	    mainImgLeft.style.backgroundPositionY=boxX+ 10 - zoom_num * zoom_size/2 +'px';
	    //中图 背景图比实际的框大32 所以移动的其实位置都是-16
	    secondary.style.backgroundPositionX=-boxY*0.4 - 16 - zoom_num * zoom_size/2 * 0.4 + 'px';
	    secondary.style.backgroundPositionY=boxX*0.4 - 16 - zoom_num * zoom_size/2 * 0.4 + 'px';
	    //小图 同中图 起始位置-8
	    small.style.backgroundPositionX=-boxY*0.2 - 8 - zoom_num * zoom_size/2 * 0.2 +'px';
	    small.style.backgroundPositionY=boxX*0.2 - 8 - zoom_num * zoom_size/2 * 0.2 +'px';
   	}

}

//当鼠标弹起时,移出鼠标移动事件
document.onmouseup=function(){
	mainImgLeft.onmousemove=null;
}

/*0表示没有旋转 -1左 1右*/
var angle = 0;

//左转
$("#rotate_left").click(function(){
	left_num--;
	angle = -1;
	//转
	leftRightImg();
});
//右转
$("#rotate_right").click(function(){
	left_num++;
	angle = 1;
	//转
	leftRightImg();
});

/**
 * 旋转图片
 */
function leftRightImg() {
	//清除img位置
	eliminateImgPosition();
	$("#mainImg_left").css("transform","rotate("+((left_num * 90))+"deg)");
	$("#secondary").css("transform","rotate("+((left_num * 90))+"deg)");
	$("#small").css("transform","rotate("+((left_num * 90))+"deg)");
}

//加
$("#zoom_in").click(function(){
	zoom_num++;
	zoom();
});
//减
$("#zoom_out").click(function(){
	zoom_num--;
	zoom();
});

$("#mainImg_left").on('mousewheel DOMMouseScroll', onMouseScroll);

function onMouseScroll(e){
    e.preventDefault();
    var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    var delta = Math.max(-1, Math.min(1, wheel) );
    if(delta<0){//向下滚动
        zoom_num = zoom_num - 0.2;
		zoom();
    }else{//向上滚动
        zoom_num = zoom_num + 0.2;
		zoom();
    }    
}

/**
 * 图片缩放  缩放按一次(zoom_size)px 
 * mainImg_left 330 secondary 132 small 66
 * 中图小图比例 0.4 0.2 缩放
 */
function zoom() {
	//限制一下大小 别让它无限缩放
	if(zoom_num >= 8) {
		zoom_num = 8;
	}
	if(zoom_num <= -6) {
		zoom_num = -6;
	}
  	$("#mainImg_left").css("background-size",(330 + zoom_num * zoom_size) + "px");
  	$("#secondary").css("background-size",(132 + zoom_num * zoom_size * 0.4) + "px");
  	$("#small").css("background-size",(66 + zoom_num * zoom_size * 0.2) + "px");
  	moveImg();
}

//画布操作图片
var canvasUrl = "";
function setCanvasUrl() {
	canvasUrl
}


//点击选图执行选文件
function clp(){
	//这样能把当前的点击事件指向到file
   return $("#file").click();
}

$("#file").change(function(){
	//获取input[file]图片的url Important
	var url;
	var file = document.getElementById("file");
	//取得浏览器的userAgent字符串
	var agent = navigator.userAgent;
	if (agent.indexOf("MSIE")>=1) {
		url = file.value;
	} else if(agent.indexOf("Firefox")>0) {
		url = window.URL.createObjectURL(file.files.item(0));
	} else if(agent.indexOf("Chrome")>0) {
		url = window.URL.createObjectURL(file.files.item(0));
	}
	//清除img位置
	eliminateImgPosition();
	
	//还原大小
	zoom_num = 0;
	zoom();
	
	left_num = 0; //重置旋转方向
	leftRightImg(); //重置方向后转动div
	//把url设置到选择图 
	//大图
    mainImgLeft.style.backgroundImage="url("+url+")";
    //中图 
    secondary.style.backgroundImage="url("+url+")";
    //小图 同中图 起始位置-8
    small.style.backgroundImage="url("+url+")";
	return url;
});

/**
 * 清除上一次的图片位置  设置图片居中
 */
function eliminateImgPosition(){
	//移动边距
	boxX = 0;
	boxY =  0;
    mainImgLeft.style.backgroundPosition="center center";
    secondary.style.backgroundPosition="center center";
    small.style.backgroundPosition="center center";
}


//画图
$(".onload").click(function(){
	var hideCanvas=document.getElementById("hideCanvas");
	var cxt=hideCanvas.getContext("2d");
	//清除上次的残留画 x y 左上角的坐标 要清除的矩形的宽度，高度
	cxt.clearRect(0,0,1000,1000);
	var img=new Image();
  	//设置图片跨域访问 才能保存画布
    //img.setAttribute('crossOrigin', 'anonymous');
	img.src="https://img.xfj100.com/upload/images/201902/20/default.jpg";
	
	//缩放前的偏移位置  图片x的位置  向左和上移动 ： (图片大小 - 画布的大小)/2  然后再加上移动的距离
	var imgx = -(330 - 250)/2 + boxX;
	var imgy = -(330 - 250)/2 + boxY;
	//图片大小
	var magnification = zoom_num * zoom_size + 330;
	//放大缩小后的距离
	imgx = imgx - (zoom_num * zoom_size)/2;
	imgy = imgy - (zoom_num * zoom_size)/2;
	
	
	
	if(angle == -1) {
		cxt.translate(magnification/2,magnification/2 - (magnification-250));
	
		angle = angle * 90 * Math.PI / 180; 
		cxt.rotate(angle);
		
		cxt.translate((-magnification/2),(-magnification/2));
	}
	//设置的右中心旋转
	if(angle == 1) {
		cxt.translate(magnification/2 - (magnification-250),magnification/2 - (magnification-250));
	
		angle = angle * 90 * Math.PI / 180; 
		cxt.rotate(angle);
		
		cxt.translate((-magnification/2 + (magnification-250)),(-magnification/2));
	}
	
	
	angle = 0;
	
	cxt.drawImage(img,imgx,imgy,magnification,magnification);
	var dataURL  = hideCanvas.toDataURL("image/png");
	//保存的图片路径
	console.log(dataURL);
});


//上传
$(".btn btn-success").click(function(){
	//图片上传
	var params = new URLSearchParams();
	params.append('dataURL', dataURL);
	postData("/wxc/image/uploadImage",params).then((res)=>{
		console.log(res);
	}).catch((err)=> {
		alert(err);
	})
});


/**
 * get数据
 * @param {Object} url
 */
function getData(url) {
	var prefix= new Prefix();
	api = prefix.getPrefix();
	let apiurl = api + url;
	return axios.get(apiurl);
}

/**
 * post数据
 * @param {Object} url
 * @param {Object} data
 */
function postData(url, data) {
	var prefix= new Prefix();
	api = prefix.getPrefix();
	return axios.post(api + url, data)
}

</script>

</html>
